<template>
    <!-- :dataField="dataField"
            :readonly="readonly"
            :required="required"
            :editable="editable"
            :style="styleObj"
            :style="position" -->
    <div id="dropdownBox">
        <select v-model="gqValue" class="dropdownBox" @change="onChanged">
            <option selected>{{ typeName }}</option>
            <!-- <option selected>{{ title }}</option> -->
            <option v-for="(item, i) in selectList" :key="i" :value="item">{{ item }}</option>
        </select>
        <!-- <div class="dropdownBox divbox">{{ gqValue }}</div> -->
    </div>
</template>

<script>
export default {
    name: 'dropdownBox',
    props: {
        // 数据属性
        dataField: {
            //数据域名称
            type: String,
        },
        readonly: {
            //是否只读，默认为 true
            type: Boolean,
            default: true,
        },
        required: {
            //是否必填，默认为 false
            type: Boolean,
            default: false,
        },
        editable: {
            //是否可编辑，默认为 false
            type: Boolean,
            default: false,
        },
        selectList: Array,
        // 对象属性
        title: {
            //提示信息，默认为空，用户可编辑
            type: String,
            default: '',
        },
        // 外观属性
        appearanceProp: {
            type: Object,
        },
        // 组件方法
        createObject: Object,
    },
    data() {
        return {
            // 组件属性
            typeID: 'dropdownBox',
            typeName: '下拉框',
            descStr: '下拉框',
            verNum: '1',
            // 数据属性
            gqValue: '', //数值
            // 对象属性
            subjectType: '',
            id: '',
            // 属性分类
            properties: {
                //属性控制，可扩展
                border: true, //边框属性是否有效，默认为false
                stroke: false, //线条属性是否有效，默认为false
                fill: true, //填充属性是否有效，默认为false
                text: true, //文本属性是否有效，默认为false
                image: false, //图像属性是否有效，默认为false
            },
            // 组件方法
            createObj: {
                type: 1, //分类，0：界面控件，1：表单控件
                id: 'dropdownBox_XXXX', //标识，通过组件标识+序号构成
                x: 100, //水平坐标
                y: 100, //垂直坐标
                width: '40mm', //宽度
                height: '10mm', //高度
            },
            //位置信息
        };
    },
    mounted() {
        this.gqValue = this.title;
        /* this.onChanged();
        this.oncreateObj(); */
    },
    computed: {
       /*  styleObj() {
            return {
                border:
                    this.appearanceProp.border.type == 0
                        ? null
                        : `${this.appearanceProp.border.width}mm solid ${this.appearanceProp.border.color}`,
                'background-color': this.appearanceProp.fill.type == 0 ? null : `${this.appearanceProp.fill.color}`,
                'font-family': `${this.appearanceProp.text.fontfamily}`,
                'font-size': `${this.appearanceProp.text.fontSize}`,
                'font-weight': this.appearanceProp.text.isBold ? 700 : 400,
                'font-style': this.appearanceProp.text.isItalic ? 'italic' : 'normal',
                color: `${this.appearanceProp.text.textColor} `,
                'text-align': `${this.appearanceProp.text.textAlign}`,

                width: `${this.createObj.width}`,
                height: `${this.createObj.height}`,
            };
        },
        position() {
            return { left: `${this.createObj.x}`, top: `${this.createObj.y}` };
        }, */
    },
    watch: {},
    methods: {
        onChanged(event) {
            this.$emit('onChanged', event);
        },
        // 组件方法
        oncreateObj() {
            this.createObj.type = this.createObject.type;
            this.createObj.id = this.createObject.id;
            this.createObj.x = this.createObject.x;
            this.createObj.y = this.createObject.y;
            this.createObj.width = this.createObject.width;
            this.createObj.height = this.createObject.height;
            this.subjectType = this.createObject.type;
            this.id = this.createObject.id;
        },
    },
};
</script>

<style lang="scss" scoped>
#dropdownBox {
    position: relative;
}
.dropdownBox {
    box-sizing: content-box;
    border: 0.3mm solid rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 0, 0.5);
    font-family: 'SimSun', '宋体';
    font-size: 18pt;
    color: #000000;
    text-align: left;
    font-weight: 400;
    font-style: normal;
    outline: none; // 选中的外框
    // padding: 0 1mm;
}
.divbox {
    position: relative;
    top: 0;
    left: 0;
}
</style>
